<template>
    <div>
        <div class="data-content">
            <div class="table-edit">
                <!--代理商-->
                <span>代理商</span>
                <Input v-model="agent" placeholder="最大输入长度35" style="width:140px"/>

                <span>状态</span>
                <Select v-model="status" style="width:140px">
                    <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Button type="info">查询</Button>
            </div>
            <Table :loading="loading" border :columns="columns" :data="user_list" class="no-border-table"
                   @on-selection-change="selectItem" ref="agent_deposit"></Table>

            <div>
                <Button @click="handleSelectAll(true)">全选</Button>
                <Button>反选</Button>
                <Button @click="handleSelectAll(true)">取消</Button>
                <Button type="primary" @click="del_model = !del_model">删除</Button>
            </div>
            <Page v-if="userCount > 0" :total="userCount" :current="page_num" @on-change="changePage"
                  @on-page-size-change="changePageSize" size="small" show-total show-sizer class="table-page">
                <slot class="total">共 {{ userCount }} 条</slot>
            </Page>
        </div>

        <Modal
                v-model="del_model"
                title="操作提示">
            <p>真的要删除当前选中项吗？一旦删除将无法恢复，请想好了再决定 </p>
            <div slot="footer">
                <Button type="text" @click="del_model = false">取消</Button>
                <Button type="error" :loading="send_loading" @click="delConfirm">删了</Button>
            </div>
        </Modal>
        <!--用户信息-->
        <UserMsgModal :usermsg_show="usermsg_show" :usermsg_loading="usermsg_loading" :usermsg="usermsg" @usermsgOk="usermsgOk"></UserMsgModal>
        <transition name="router-slid">
            <router-view></router-view>
        </transition>

    </div>
</template>
<script>
    import WrapperContent from '../../../components/wrapper-content.vue'
    import {getUserList, getUser, getLevelList, getPositionList,doUserInfo,delUser,changeUserState} from "@/api/user";
    import * as utils from '../../../assets/js/utils'
    import $ from 'jquery'
    import _ from 'lodash'
    import UserMsgModal from  './../../common/userMsgModal.vue'

    export default {
        components: {
            WrapperContent,UserMsgModal
        },
        data() {
            return {
                username:'',
                agent:'',
                search_date: [],
                statusList:[],
                status:'',
                self: this,
                level_list: [],
                position_list: [],
                del_model: false,
                select_users: [],
                send_loading: false,
                page_size: 10,
                page_num: 1,
                keyword: '',
                loading: true,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户',
                        key: 'tel',
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        this.usermsg_show = true ;
                                    }
                                }
                            }, params.row.tel);
                        }
                    },
                    {
                        title: '代理商',
                        key: 'last_login_time',
                    },
                    {
                        title: '申请日期',
                        key: 'login_ip',
                    },
                    {
                        title: '打款日期',
                        key: 'login_ip',
                    },
                    {
                        title: '金额',
                        key: 'login_ip',
                    },
                    {
                        title: '银行',
                        key: 'login_ip',
                    },
                    {
                        title: '开户行(支行)',
                        key: 'login_ip',
                    },
                    {
                        title: '开户省',
                        key: 'login_ip',
                    },
                    {
                        title: '开户市)',
                        key: 'login_ip',
                    },
                    {
                        title: '开户人',
                        key: 'login_ip',
                    },
                    {
                        title: '银行编号',
                        key: 'login_ip',
                    },
                    {
                        title: '帐号',
                        key: 'login_ip',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '3px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toset(params.row.id);
                                        }
                                    }
                                }, '设置已打款'),
                                h('Button', {
                                    props: {
                                        type: '',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '3px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toback(params.row.id);
                                        }
                                    }
                                }, '回退'),
                            ]);
                        }
                    }
                ],
                user_list: [{}],
                userCount: 0,
                usermsg_show:false,
                usermsg_loading : false ,
                usermsg:{
                    id:'13518298587',
                    name:'xx',
                    type:'正式',
                    tel:'13518298587',
                    cash_deposit:'200',
                    balance:'1',
                    register_time:'2018/11/12',
                    last_login_time:'01-22/10:11'
                },
            }
        },
        created: function () {
            this.loading = false;
            this.userCount = 1 ;
            /* this.getUserList();
             this.getLevelList();
             this.getPositionList()*/
        },
        methods: {
            getUserList() {
                let app = this;
                getUserList(this.page_size, this.page_num, this.keyword).then(res => {
                    app.loading = false;
                    app.user_list = res.data.list;
                    app.userCount = Number(res.data.count)
                });
            },
            getInfo() {
                let app = this;
                getUser(app.formValidate.user_id).then(res => {
                    if (res.data) {
                        app.formValidate.user_id = res.data.id;
                        app.formValidate.account = res.data.account;
                        app.formValidate.realname = res.data.realname;
                        app.formValidate.level_id = res.data.level_id;
                        app.formValidate.position_id = res.data.position_id;
                        app.formValidate.state = res.data.state
                    }
                });
            },
            getLevelList() {
                let app = this;
                getLevelList(50).then(res => {
                    app.level_list = res.data.list
                });
            },
            getPositionList() {
                let app = this;
                getPositionList(50).then(res => {
                    app.position_list = res.data.list
                });
            },
            search: _.debounce(
                function () {
                    this.page_num = 1;
                    this.getUserList()
                },
                // 这是我们为用户停止输入等待的毫秒数
                500
            ),
            selectItem(selection) {
                let app = this;
                app.select_users = [];
                $.each(selection, function (k, v) {
                    app.select_users.push(v.id)
                });
            },
            changePage(page) {
                this.page_num = page;
                this.getUserList()
            },
            changePageSize(page_size) {
                this.page_num = 1;
                this.page_size = page_size;
                this.getUserList()
            },
            reloadList() {
                this.getUserList(1, this.page_size)
            },
            rowClassName(row, index) {
                return 'rowClassName';
            },
            changeState(id, state, index) {
                let app = this;
                const change_state = state == 1 ? 0 : 1;
                changeUserState(id,state == 1 ? 0 : 1).then(res => {
                    app.user_list[index].state = change_state
                });
            },
            toset(){

            },
            toback(){

            },
            handleSelectAll (status) {
                this.$refs.user_deposit.selectAll(status);
            },
            usermsgOk(){
                let app = this ;
                setTimeout(() => {
                    app.usermsg_show = false;
                }, 2000);
            },
        }
    }
</script>
